<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Connection, Delete, Timer } from '@element-plus/icons-vue'

// 设备连接状态
const isConnected = ref(false)

// 最后同步时间
const lastSyncTime = ref('尚未同步')

// 智能手环列表
const smartBands = ref([
  {
    id: 1,
    name: '智能手环',
    battery: 85,
    lastUpdate: '23分钟前',
    status: '在线'
  },
  {
    id: 2,
    name: '智能手环',
    battery: 85,
    lastUpdate: '23分钟前',
    status: '在线'
  }
])

// 连接设备
const connectDevice = () => {
  ElMessage.success('设备连接成功')
  isConnected.value = true
  lastSyncTime.value = new Date().toLocaleTimeString()
}

// 删除设备
const deleteDevice = () => {
  ElMessage.warning('设备已删除')
  isConnected.value = false
  lastSyncTime.value = '尚未同步'
}
</script>

<template>
  <div class="intelligent-collection">
    <!-- 智能设备连接区域 -->
    <div class="device-connection-card">
      <h3 class="section-title">智能设备连接</h3>
      <div class="connection-box">
        <div class="connection-actions">
          <el-button type="primary" :icon="Connection" @click="connectDevice">连接设备</el-button>
          <el-button :icon="Delete" @click="deleteDevice">删除设备</el-button>
        </div>
        <div class="sync-info">
          <div class="sync-label">最后同步时间</div>
          <div class="sync-time">{{ lastSyncTime }}</div>
        </div>
      </div>
    </div>

    <!-- 智能手环状态区域 -->
    <div v-for="band in smartBands" :key="band.id" class="device-status-card">
      <div class="device-header">
        <h4 class="device-name">{{ band.name }}</h4>
        <span class="device-status" :class="{ 'online': band.status === '在线' }">{{ band.status }}</span>
      </div>
      <div class="device-info">
        <div class="battery-info">
          <el-icon><i-ep-battery-full /></el-icon>
          <span>{{ band.battery }}%</span>
        </div>
        <div class="update-info">
          <el-icon><Timer /></el-icon>
          <span>更新于 {{ band.lastUpdate }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.intelligent-collection {
  padding: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #333;
}

.device-connection-card,
.device-status-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

.connection-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.connection-actions {
  display: flex;
  gap: 10px;
}

.sync-info {
  display: flex;
  flex-direction: column;
}

.sync-label {
  font-size: 14px;
  color: #909399;
}

.sync-time {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.device-name {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

.device-status {
  font-size: 14px;
  color: #909399;
}

.device-status.online {
  color: #27ba9b;
}

.device-info {
  display: flex;
  justify-content: space-between;
}

.battery-info,
.update-info {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #606266;
}

.el-icon {
  margin-right: 5px;
}
</style>
